<template>
  <el-row :gutter="10" >
    <el-col :span="8">
      <el-card style="min-height: 500px">
        <div>
          <el-image :src="img" class="image"></el-image>
        </div>
        <div align="center" id="" class="">
          <el-popover placement="top" :width="400" trigger="hover">
            <template #reference>
              <el-button>更新照片</el-button>
            </template>
            <el-upload
                class="upload-demo"
                drag
                :action="uploadUrl+'/'+Info.mobile"
                :headers="header"
                :on-success="uploadSeccess"
                multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传 jpg/png 文件，且不超过 500kb
                </div>
              </template>
            </el-upload>
          </el-popover>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card class="box-card">
        <el-radio-group v-model="size">
          <el-radio label="">默认</el-radio>
          <el-radio label="medium">中等</el-radio>
          <el-radio label="small">小型</el-radio>
          <el-radio label="mini">超小</el-radio>
        </el-radio-group>
        <el-descriptions
            class="margin-top"
            title="用户信息"
            :column="3"
            direction="vertical"
            :size="size"
            border
            v-show="!isUpdate"
        >
          <template #extra>
            <el-button type="success" size="small" @click="pwdDialogShow=true"
            >重置密码
            </el-button
            >
            <el-button type="primary" size="small" @click="isUpdate = true; editForm = JSON.parse(JSON.stringify(Info))"
            >修改
            </el-button
            >
          </template>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ Info.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              性别
            </template>
            {{ Info.sex }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              年龄
            </template>
            {{ Info.age }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ Info.mobile }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <i class="el-icon-tickets"></i>
              身份证号
            </template>
            <el-tag size="small">{{ Info.idNumber }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              学院
            </template>
            {{ Info.college }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
            class="margin-top"
            title="用户信息"
            :column="3"
            direction="vertical"
            :size="size"
            border
            v-show="isUpdate"
        >
          <template #extra>

            <el-button type="danger" size="small" @click="isUpdate=false"
            >取消
            </el-button
            >
            <el-button type="primary" size="small" @click="update"
            >提交
            </el-button
            >
          </template>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              用户名
            </template>
            <el-input
                v-model="editForm.name"
                placeholder="请输入内容"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              性别
            </template>

            <el-select
                v-model="editForm.sex"
                placeholder="请选择性别"
                style="width: 100%"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-user"></i>
              年龄
            </template>
            <el-input
                v-model="editForm.age"
                placeholder="请输入内容"
                type="number"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            <el-input
                v-model="editForm.mobile"
                placeholder="请输入内容"
                maxlength="11"
                minlength="11"
            ></el-input>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <i class="el-icon-tickets"></i>
              身份证号
            </template>
            <el-tag size="small">{{ editForm.idNumber }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <i class="el-icon-location-outline"></i>
              学院
            </template>
            {{ editForm.college }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card style="padding-right: 200px">
        <el-button @click="getCode" v-if="code === 0">获取临时码</el-button>
        <span v-else>临时码：{{ code }}</span>
        <el-table
            :data="recordData"
            style="margin-left: 36px; margin-top: 36px"
        >
          <el-table-column
              prop="data_time"
              label="日期"
              sortable
              align="center"
              width="200"
          >
          </el-table-column>

          <el-table-column
              label="状态"
              width="200"
              align="center"
              filter-placement="bottom-end"
              :filters="[
              { text: '人脸', value: 'face' },
              { text: '输码', value: 'code' },
            ]"
              :filter-method="methodFilter"
          >
            <template #default="scope">
              <el-tag type="info" v-if="scope.row.method == 'face'"
              >人脸</el-tag
              >
              <el-tag type="info" v-else>输码</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>

  <el-dialog title="修改密码" v-model="pwdDialogShow" width="30%">
    <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-position="left" label-width="120px">
      <el-form-item label="原始密码：" prop="pwd">
        <el-input v-model="dialogForm.pwd" autocomplete="off" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPwd">
        <el-input v-model="dialogForm.newPwd" autocomplete="off" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="confirm">
        <el-input v-model="dialogForm.confirm" autocomplete="off" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="pwdDialogShow = false;dialogForm = {}">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {getTeacherInfo,changeTeacherInfo} from "../../network/teacher";
import {Msg,getAge} from "../../utils/pubMethod";
import {changePwd} from "../../network/account"
export default {
  name: "Info",
  data() {
    const checkConfirm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else if (value !== this.dialogForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const checkPassword = (rule, value, callback) => {
      const patten = /^(?=.*\d)(?=.*[a-z])[a-zA-Z0-9]{6,18}$/;
      if (!patten.test(value)) {
        callback(new Error("密码不符合要求"));
      } else {
        callback();
      }
    };
    return {
      size: "",
      header: {},
      uploadUrl: "/api/upload",
      Info: {},
      img: "/api/img",
      isUpdate: false,
      editForm: {},
      pwdDialogShow: false,
      dialogForm: {
        pwd: '',
        newPwd: '',
        confirm: ''
      },
      rules: {
        pwd: [{required: true, message: "请输入旧密码", trigger: "blur"}],
        newPwd: [
          {required: true, message: "请输入新密码", trigger: "blur"},
          {validator: checkPassword, trigger: "blur"},
        ],
        confirm: [{required: true, message: "请确认密码", trigger: "blur"},
          {validator: checkConfirm, trigger: "blur"}],
      },
    };
  },
  created() {
    this.header.authorization = window.localStorage.getItem("authorization");
    this.getTeacherInfo()
  },

  methods: {
    getTeacherInfo(){
      getTeacherInfo().then(res=>{
        try {
          if (res.code === 200) {
            this.Info = res.data
            this.Info.age = getAge(this.Info.birthday)
            this.img=this.img+'/'+this.Info.uid
          }
        } catch (e) {
          Msg(this.$message, 'error', '网络连接失败')
        }
      },err=>{})
    },
    changeTeacherInfo() {
      changeTeacherInfo(this.editForm).then(res => {
        try {
          if (res.code === 200) {
            Msg(this.$message, 'success', '修改成功')
            this.Info = this.editForm
            this.isUpdate = false;
          } else {
            Msg(this.$message, 'error', res.data)

          }
        } catch (e) {
          Msg(this.$message, 'error', '网络连接失败')
        }
      }, err => {
      })
    },
    changePwd() {
      const data = {
        mobile: this.Info.mobile,
        password: this.dialogForm.pwd,
        newPwd: this.dialogForm.newPwd
      }
      changePwd(data).then(res => {
        try {
          if (res.code === 200) {
            Msg(this.$message, 'success', '修改成功')
            this.pwdDialogShow = false
            this.dialogForm = {}
          } else {
            Msg(this.$message, 'error', res.data)
          }
        } catch (e) {
          Msg(this.$message, 'error', '网络连接失败')
        }
      }, err => {
      })
    },
    uploadSeccess() {
      Msg(this.$message, 'success', '修改成功')
    },
    update() {
      this.isUpdate = false;
      this.changeTeacherInfo()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    onSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.changePwd()
        }
      });
    },
  },
};
</script>

<style scoped>
.image {
  width: 100%;
  height:100%;
}
margin-top {
  margin-top: 20px;
}
.upload-demo {
  width: 100%;
  height: 100%;
}
</style>